<template>
	<div class="catalog_item">
		<div class="checkbox"><slot name="checkbox"></slot></div>
		<dl>
			<dt>{{ firstWord }}</dt>
			<dd>{{ data.name }}</dd>
		</dl>
		<el-button-group>
			<el-button type="text" @click="handleLookCatalog">详情</el-button>
			<el-button type="text" @click="handleEditCatalog">编辑</el-button>
			<el-button type="text" @click="handleSetCataLog">移动到</el-button>
			<el-button type="text" @click="handleDelCatalog">删除</el-button>
		</el-button-group>
	</div>
</template>

<script>
import { deleteCatalog } from '@/api/data/tbNetDefCatalog';
export default {
	props: {
		data: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	computed: {
		firstWord() {
			return this.data.name.charAt(0);
		}
	},
	methods: {
		//删除编目
		handleDelCatalog() {
			let that = this;
			that.$confirm(`此操作将永久删除编目定义<font color="#f00">【${this.data.name}】</font>, 是否继续?`, '提示', {
				type: 'warning',
				dangerouslyUseHTMLString: true,
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteCatalogRequest();
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//编目定义移动到其他编目
		handleSetCataLog() {
			this.$emit('handle', 'move', this.data);
		},

		//查看编目定义详情
		handleLookCatalog() {
			this.$emit('handle', 'look', this.data);
		},

		//编辑编目定义
		handleEditCatalog() {
			this.$emit('handle', 'edit', this.data);
		},

		//删除编目定义
		async deleteCatalogRequest() {
			let result = await deleteCatalog(id).then((res) => res.data);
			if (result.code == '0') {
				this.$message.success('删除编目定义成功');
				this.$emit('handle', 'refresh');
			} else {
				this.$message.error('删除编目定义失败');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.catalog_item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 150px;
	border-radius: 4px;
	padding: 16px 16px 4px;
	border: solid 1px #e4e7ed;
	box-sizing: border-box;
	position: relative;
	.checkbox {
		position: absolute;
		top: 8px;
		right: 8px;
	}
	&:hover {
		background-color: #f2f6fc;
	}
	dl {
		display: flex;
		align-items: center;
	}
	dt {
		width: 60px;
		height: 60px;
		flex-shrink: 0;
		line-height: 60px;
		text-align: center;
		border-radius: 8px;
		font-size: 24px;
		background-color: var(--primary);
		color: #fff;
	}
	dd {
		font-size: 16px;
		margin-left: 16px;
		line-height: 30px;
	}
	.el-button-group {
		display: flex;
		justify-content: space-around;
		width: 100%;
		border-top: solid 1px #e4e7ed;
		&::before,
		&::after {
			content: none;
		}
	}
}
</style>
